(function(){
	$.namespace("com.yogi.wrappers.gallery");

	/**
	 * { 
	 		"type":"gallery_html5",
	 		"catalog":"fashionCatalog",
	 		"width":"500px",
	 		"height":"450px",
	 		"thumb_ct_id":"thumbnail_container_id",
	 		"image_ct_id":"image_container_id",
	 		"effect":"slide-hori",
	 		"thumb_vertical":false,
	 		"nav_custom": {
	 			"div_forward":"div_forward_id",
	 			"div_back":"div_back_id"
	 		},
	 		"slideshow":false
	 	}
	 */
	com.yogi.wrappers.gallery.GalleryWrapper = function() {
		com.yogi.wrappers.gallery.GalleryWrapper.superclass.constructor.call(this);
	};
	Ext.extend(com.yogi.wrappers.gallery.GalleryWrapper,com.yogi.core.PartWrapperBase,{	
		gallery: false,
		gallery_ct:false,
		thumb_nail_ct:false,
		wrap: function(part,wrapperConfig,partConfig) {
			com.yogi.wrappers.gallery.GalleryWrapper.superclass.wrap(part,wrapperConfig,partConfig,this);		
			var context = this;
			
			part.waitForDiv(function(partComp){
					partComp.css("width", wrapperConfig.width).css("height", wrapperConfig.height);
									
					var ad_gallery_ct;										
					if(wrapperConfig.thumb_vertical == true){
						partComp.addClass("ad-gallery-vertical");
						ad_gallery_ct = partComp;
					} else {
						partComp.addClass("ad-gallery");
						ad_gallery_ct = partComp;
					}
					
					function init_dom() {
							context.gallery_ct = part.getElement(wrapperConfig.image_ct_id);
							context.gallery_ct.css("background-color","transparent");
							context.gallery_ct.empty();
							
							//console.log("gallery_ct:" + wrapperConfig.image_ct_id);
							//console.log(gallery_ct);
							context.gallery_ct.addClass("ad-image-wrapper");
							ad_gallery_ct.append($("<div class='ad-controls' style='display:none'></div>"));
							var raw_nav_ct = part.getElement(wrapperConfig.thumb_ct_id);							
							raw_nav_ct.css("background-color","transparent");
							raw_nav_ct.empty();
							
							var nav_ct = $("<div class='ad-nav' style='margin:0px;padding:0px'></div>");
							raw_nav_ct.append(nav_ct);
							nav_ct.append($("<div class='ad-thumbs'><ul class='ad-thumb-list'></ul></div>"));
							ad_gallery_ct.append($("<div id='descriptions'></div>"));					
							ad_gallery_ct.append(context.gallery_ct);
							
							context.thumb_nail_ct = nav_ct.find(".ad-thumbs .ad-thumb-list");
							
							return nav_ct;
					}
					function init_images(nav_ct) {						
						//console.log(ul_ct);
						
						if($.isiPad()) {
//							$(document).bind("touchmove", function(event) {
//							    event.preventDefault();
//							    curX = event.targetTouches[0].pageX - startX;
//							    curY = event.targetTouches[0].pageY - startY;
//							    ul_ct.style.webkitTransform =
//							        'translate(' + curX + 'px, ' + curY + 'px)';
//							});
						}
						var cust_setting = {
								effect:  wrapperConfig.effect || "slide-hori",
								thumb_opacity: 0.5,									
						 		thumb_vertical: wrapperConfig.thumb_vertical == true,
						 		thumb_ct_size: wrapperConfig.thumb_ct_size,
						 		scroll_jump: wrapperConfig.scroll_jump,
						 		loader_image: window.contentPanel.get_loading_indicate_image()
						};
						if(wrapperConfig.nav_custom){
							cust_setting.nav_custom = {
					 			"div_forward": part.getElementId(wrapperConfig.nav_custom.div_forward),
					 			"div_back": part.getElementId(wrapperConfig.nav_custom.div_back)					 			
					 		};
						}
						var galleries = ad_gallery_ct.adGallery( cust_setting );
						galleries[0].slideshow.enable = wrapperConfig.slideshow == true;
						context.gallery = galleries[0];
						
						if(wrapperConfig.catalog) {
							context.navigateTo( wrapperConfig.catalog );
						}			
					}
					if(typeof($.fn.adGallery) == "undefined")	{
						$.getScript("lib/jquery.ad-gallery.js", function() {
							var csss = ["lib/jquery.ad-gallery-vertical.css","lib/jquery.ad-gallery.css"];
							com.yogi.core.loadCss(csss, function() {								
								init_images(init_dom());
							});							
						} );
					}  else {		
						init_images(init_dom());
					}
			});
		},
		getHostCatalog: function() {
			return this.m_config.catalog;
		},
		navigateTo: function(catalog_name) {
			var context = this;
			context.gallery_ct.empty();
			context.thumb_nail_ct.empty();
			
			var data_js = "config/" + catalog_name + "/json.js";
			//console.log("data_js=" + data_js);
			$.getScript(data_js, function(data,textStatus) {
				if(textStatus != "success") {
					throw "loading script:" + script + " error.";
				}	
				//console.log("images_data=");
				//console.log(images_data);
				for(var i=0;i < images_data.length; i++){
					var ImageUrl = images_data[i].ImageUrl;
					var Thumbnail = images_data[i].Thumbnail;
					context.thumb_nail_ct.append($("<li>" +
				              "<a href='" + ImageUrl + "'>" +
				              "<img src='" + Thumbnail + "' class='image" + i  + "' />" +
				              "</a>" +
				            "</li>"));
				}		
				context.gallery.load_images(0);
			});	
		}
	});
	/**
	 * 
	 { 
	 	"type":"gallery_nav",
	 	"gallery_wrapper": "gallery_part_wrapper_guid_to_control",
	 	"nav_map": {
	 		"menu_item_btn_0" : "image_catalog_a",
	 		"menu_item_btn_1" : "image_catalog_b",
	 		"menu_item_btn_2" : "image_catalog_c"
	 	},
	 	"item_switch_method": function(){
	 		//custom switch status maintain method
	 	}
	 }
	 * contain sub menu items of a gallery navigator, with active-unactive logic wrapped inside of it.
	 */
	com.yogi.wrappers.gallery.GalleryNavigatorWrapper = function() {
		com.yogi.wrappers.gallery.GalleryNavigatorWrapper.superclass.constructor.call(this);
		
		this.active_sub_menu_id = 0;
	};
	Ext.extend(com.yogi.wrappers.gallery.GalleryNavigatorWrapper,com.yogi.core.PartWrapperBase,{			
		wrap: function(part,wrapperConfig,partConfig) {
			com.yogi.wrappers.gallery.GalleryNavigatorWrapper.superclass.wrap(part,wrapperConfig,partConfig);
			var context = this;			
			part.waitForDiv(function(partComp){
				var gallery_wrapper = context.getWrapper( wrapperConfig.gallery_wrapper );
				
				if(gallery_wrapper) {
					var nav_map = wrapperConfig.nav_map;
					for(var sub_menu_id in nav_map) {
						var sub_menu = $(part.getElement(sub_menu_id));
						sub_menu.data("catalog",nav_map[sub_menu_id]);
						sub_menu.click(function() {
							gallery_wrapper.navigateTo( $(this).data("catalog") );
							
							context.active_sub_menu_id = sub_menu_id;							
						});
					}
					//maintain the active status indication, black dot
					var inter = setInterval(function() {				
						if(context.active_sub_menu_id != 0)
							{
								var active_menu = $(part.getElement(context.active_sub_menu_id));
								if( active_menu && active_menu.find("b").length == 0) {
									var old_html = 	active_menu.html();
									active_menu.html("<b>·</b>" + old_html);
								}
							}											
					}, 2000);					
					$(window.contentPanel).bind(com.yogi.core.ContentPanel.CATALOGLOADED_EVENT, function(e,data) {
						if(e.current != gallery_wrapper.getHostCatalog() ) {
							clearInterval(inter);
						}
					});
				} else {
					alert("find no gallery wrapper of guid:[" + wrapperConfig.gallery_wrapper + "]");
				}
			});
		}
	});
	
	var wrapperManager = window.contentPanel.getWrapperManager();
	wrapperManager.registerWrapperClass("gallery_html5", com.yogi.wrappers.gallery.GalleryWrapper);
	wrapperManager.registerWrapperClass("gallery_nav", com.yogi.wrappers.gallery.GalleryNavigatorWrapper);
})();